<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员勋章中心 - 社交平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36CFC9;
            --success: #52C41A;
            --warning: #FAAD14;
            --danger: #FF4D4F;
            --purple: #722ED1;
            --orange: #FF7D00;
            --pink: #F53F3F;
            --dark: #1D2129;
            --gray: #86909C;
            --light: #F2F3F5;
            --border: #E5E6EB;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F7F8FA;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 主内容区 */
        .main-content {
            padding: 2rem 0;
        }
        
        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .page-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        
        .page-desc {
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* 个人勋章概览 */
        .badge-overview {
            background-color: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 3rem;
        }
        
        .overview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .overview-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .overview-stats {
            display: flex;
            gap: 2rem;
        }
        
        .overview-stat {
            text-align: center;
        }
        
        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .current-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 0;
        }
        
        .badge-display {
            text-align: center;
            padding: 0 2rem;
        }
        
        .badge-icon {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            position: relative;
            box-shadow: 0 4px 16px rgba(22, 93, 255, 0.25);
            transition: transform 0.3s ease;
        }
        
        .badge-icon:hover {
            transform: scale(1.05) rotate(5deg);
        }
        
        .badge-icon::after {
            content: '';
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            bottom: -6px;
            border-radius: 50%;
            border: 2px dashed rgba(255, 255, 255, 0.5);
        }
        
        .badge-name {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }
        
        .badge-level {
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .badge-desc {
            color: var(--gray);
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* 勋章墙 */
        .badge-wall {
            margin-bottom: 3rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .filter-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .filter-tab {
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        
        .filter-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .badge-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
        }
        
        .badge-card {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: var(--shadow);
            transition: transform 0.2s, box-shadow 0.2s;
            position: relative;
            overflow: hidden;
        }
        
        .badge-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .badge-card.locked::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7);
            z-index: 1;
        }
        
        .badge-lock {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            color: var(--gray);
            z-index: 2;
            display: none;
        }
        
        .badge-card.locked .badge-lock {
            display: block;
        }
        
        .badge-icon-sm {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            position: relative;
        }
        
        .badge-icon-sm::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            border-radius: 50%;
            border: 2px dashed rgba(255, 255, 255, 0.3);
        }
        
        .badge-name-sm {
            font-weight: 600;
            margin-bottom: 0.25rem;
            font-size: 1.1rem;
        }
        
        .badge-level-sm {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
        }
        
        .badge-card.locked .badge-icon-sm {
            filter: grayscale(100%);
            opacity: 0.7;
        }
        
        .badge-card.locked .badge-name-sm,
        .badge-card.locked .badge-level-sm {
            color: var(--gray);
            opacity: 0.7;
        }
        
        /* 勋章成就类型 */
        .badge-achievements {
            margin-bottom: 3rem;
        }
        
        .achievement-categories {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .achievement-category {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }
        
        .category-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .category-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .category-title {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .category-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .mini-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80px;
        }
        
        .mini-badge-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: white;
        }
        
        .mini-badge-name {
            font-size: 0.85rem;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .mini-badge.locked .mini-badge-icon {
            filter: grayscale(100%);
            opacity: 0.7;
        }
        
        .mini-badge.locked .mini-badge-name {
            color: var(--gray);
            opacity: 0.7;
        }
        
        /* 勋章详情模态框 */
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        .badge-modal .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 2rem;
        }
        
        .modal-header {
            border-bottom: none;
            padding-bottom: 1rem;
        }
        
        .modal-title {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .modal-body {
            padding: 1rem 0;
            text-align: center;
        }
        
        .badge-detail-icon {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            box-shadow: 0 4px 16px rgba(22, 93, 255, 0.25);
        }
        
        .badge-detail-name {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .badge-detail-level {
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }
        
        .badge-detail-desc {
            color: var(--gray);
            margin-bottom: 1.5rem;
            font-size: 1rem;
        }
        
        .badge-detail-meta {
            background-color: var(--light);
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            text-align: left;
        }
        
        .meta-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .meta-item:last-child {
            margin-bottom: 0;
        }
        
        .meta-label {
            color: var(--gray);
        }
        
        .meta-value {
            font-weight: 500;
        }
        
        .modal-footer {
            border-top: none;
            padding-top: 1rem;
            justify-content: center;
        }
        
        .unlock-btn {
            padding: 0.75rem 2rem;
            border-radius: 8px;
            background-color: var(--primary);
            color: white;
            border: none;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .unlock-btn:hover {
            background-color: #0E42D2;
            color: white;
        }
        
        .unlock-btn.locked {
            background-color: var(--gray);
            cursor: not-allowed;
        }
        
        .unlock-btn.locked:hover {
            background-color: var(--gray);
        }
        
        /* 勋章颜色样式 */
        .badge-primary {
            background-color: var(--primary);
        }
        
        .badge-secondary {
            background-color: var(--secondary);
        }
        
        .badge-success {
            background-color: var(--success);
        }
        
        .badge-warning {
            background-color: var(--warning);
        }
        
        .badge-danger {
            background-color: var(--danger);
        }
        
        .badge-purple {
            background-color: var(--purple);
        }
        
        .badge-orange {
            background-color: var(--orange);
        }
        
        .badge-pink {
            background-color: var(--pink);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .badge-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }
            
            .achievement-categories {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.75rem;
            }
            
            .overview-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .overview-stats {
                width: 100%;
                justify-content: space-between;
            }
            
            .current-badge {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .badge-display {
                padding: 0;
            }
            
            .badge-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
            
            .achievement-categories {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 576px) {
            .badge-icon {
                width: 120px;
                height: 120px;
                font-size: 2.5rem;
            }
            
            .badge-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .filter-tab {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
            
            .badge-detail-icon {
                width: 120px;
                height: 120px;
                font-size: 3rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">社交平台</a>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-medal me-1"></i> 勋章中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-graduation-cap me-1"></i> 成长中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">会员勋章中心</h1>
            <p class="page-desc">收集独特勋章，展示你的社交成就。完成各种任务和挑战，解锁专属勋章，彰显你的独特身份。</p>
        </div>
        
        <!-- 个人勋章概览 -->
        <div class="badge-overview">
            <div class="overview-header">
                <h2 class="overview-title">我的勋章</h2>
                <div class="overview-stats">
                    <div class="overview-stat">
                        <div class="stat-number">12</div>
                        <div class="stat-label">已解锁</div>
                    </div>
                    <div class="overview-stat">
                        <div class="stat-number">38</div>
                        <div class="stat-label">未解锁</div>
                    </div>
                    <div class="overview-stat">
                        <div class="stat-number">32%</div>
                        <div class="stat-label">收集进度</div>
                    </div>
                </div>
            </div>
            
            <div class="current-badge">
                <div class="badge-display">
                    <div class="badge-icon badge-purple">
                        <i class="fas fa-diamond"></i>
                    </div>
                    <h3 class="badge-name">钻石会员勋章</h3>
                    <div class="badge-level">Lv.6 专属</div>
                    <p class="badge-desc">达到钻石会员等级时解锁，象征着你在社区中的活跃与贡献。</p>
                </div>
                
                <div class="vr d-none d-md-block mx-4"></div>
                
                <div class="badge-display">
                    <div class="badge-icon badge-orange">
                        <i class="fas fa-fire"></i>
                    </div>
                    <h3 class="badge-name">连续活跃勋章</h3>
                    <div class="badge-level">128天</div>
                    <p class="badge-desc">连续活跃超过100天解锁，展示你的持续参与和社区热情。</p>
                </div>
            </div>
        </div>
        
        <!-- 等级勋章墙 -->
        <div class="badge-wall">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-trophy"></i> 等级勋章
                </h2>
            </div>
            
            <div class="filter-tabs">
                <div class="filter-tab active">全部等级</div>
                <div class="filter-tab">已解锁</div>
                <div class="filter-tab">未解锁</div>
            </div>
            
            <div class="badge-grid">
                <!-- 已解锁等级勋章 -->
                <div class="badge-card" data-bs-toggle="modal" data-bs-target="#badgeModal" data-badge="novice">
                    <div class="badge-icon-sm badge-primary">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <h3 class="badge-name-sm">新手勋章</h3>
                    <div class="badge-level-sm">Lv.1 解锁</div>
                </div>
                
                <div class="badge-card" data-bs-toggle="modal" data-bs-target="#badgeModal" data-badge="advanced">
                    <div class="badge-icon-sm badge-secondary">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3 class="badge-name-sm">进阶勋章</h3>
                    <div class="badge-level-sm">Lv.2 解锁</div>
                </div>
                
                <div class="badge-card" data-bs-toggle="modal" data-badge="senior">
                    <div class="badge-icon-sm badge-success">
                        <i class="fas fa-tree"></i>
                    </div>
                    <h3 class="badge-name-sm">资深勋章</h3>
                    <div class="badge-level-sm">Lv.3 解锁</div>
                </div>
                
                <div class="badge-card" data-bs-toggle="modal">
                    <div class="badge-icon-sm badge-warning">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3 class="badge-name-sm">专家勋章</h3>
                    <div class="badge-level-sm">Lv.4 解锁</div>
                </div>
                
                <div class="badge-card" data-bs-toggle="modal">
                    <div class="badge-icon-sm badge-danger">
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                    <h3 class="badge-name-sm">大师勋章</h3>
                    <div class="badge-level-sm">Lv.5 解锁</div>
                </div>
                
                <div class="badge-card" data-bs-toggle="modal">
                    <div class="badge-icon-sm badge-purple">
                        <i class="fas fa-diamond"></i>
                    </div>
                    <h3 class="badge-name-sm">钻石勋章</h3>
                    <div class="badge-level-sm">Lv.6 解锁</div>
                </div>
                
                <!-- 未解锁等级勋章 -->
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-orange">
                        <i class="fas fa-crown"></i>
                    </div>
                    <h3 class="badge-name-sm">铂金勋章</h3>
                    <div class="badge-level-sm">Lv.7 解锁</div>
                </div>
                
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-pink">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3 class="badge-name-sm">黄金勋章</h3>
                    <div class="badge-level-sm">Lv.8 解锁</div>
                </div>
                
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-primary">
                        <i class="fas fa-medal"></i>
                    </div>
                    <h3 class="badge-name-sm">王者勋章</h3>
                    <div class="badge-level-sm">Lv.9 解锁</div>
                </div>
                
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-secondary">
                        <i class="fas fa-star-of-david"></i>
                    </div>
                    <h3 class="badge-name-sm">传说勋章</h3>
                    <div class="badge-level-sm">Lv.10 解锁</div>
                </div>
            </div>
        </div>
        
        <!-- 成就勋章 -->
        <div class="badge-achievements">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-award"></i> 成就勋章
                </h2>
            </div>
            
            <div class="achievement-categories">
                <!-- 互动类勋章 -->
                <div class="achievement-category">
                    <div class="category-header">
                        <div class="category-icon badge-primary">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h3 class="category-title">互动达人</h3>
                    </div>
                    
                    <div class="category-badges">
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-primary">
                                <i class="fas fa-thumbs-up"></i>
                            </div>
                            <div class="mini-badge-name">点赞达人</div>
                        </div>
                        
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-secondary">
                                <i class="fas fa-comment"></i>
                            </div>
                            <div class="mini-badge-name">评论专家</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-success">
                                <i class="fas fa-share-alt"></i>
                            </div>
                            <div class="mini-badge-name">分享大师</div>
                        </div>
                        
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-warning">
                                <i class="fas fa-heart"></i>
                            </div>
                            <div class="mini-badge-name">人气王</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-danger">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="mini-badge-name">社交达人</div>
                        </div>
                    </div>
                </div>
                
                <!-- 创作类勋章 -->
                <div class="achievement-category">
                    <div class="category-header">
                        <div class="category-icon badge-purple">
                            <i class="fas fa-pen-fancy"></i>
                        </div>
                        <h3 class="category-title">创作能手</h3>
                    </div>
                    
                    <div class="category-badges">
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-purple">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="mini-badge-name">初露锋芒</div>
                        </div>
                        
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-orange">
                                <i class="fas fa-blog"></i>
                            </div>
                            <div class="mini-badge-name">专栏作家</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-pink">
                                <i class="fas fa-video"></i>
                            </div>
                            <div class="mini-badge-name">视频达人</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-primary">
                                <i class="fas fa-image"></i>
                            </div>
                            <div class="mini-badge-name">摄影大师</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-secondary">
                                <i class="fas fa-microphone"></i>
                            </div>
                            <div class="mini-badge-name">声音达人</div>
                        </div>
                    </div>
                </div>
                
                <!-- 活动类勋章 -->
                <div class="achievement-category">
                    <div class="category-header">
                        <div class="category-icon badge-warning">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <h3 class="category-title">活动达人</h3>
                    </div>
                    
                    <div class="category-badges">
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-warning">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="mini-badge-name">全勤奖</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-danger">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="mini-badge-name">活动冠军</div>
                        </div>
                        
                        <div class="mini-badge">
                            <div class="mini-badge-icon badge-success">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="mini-badge-name">组织者</div>
                        </div>
                        
                        <div class="mini-badge locked">
                            <div class="mini-badge-icon badge-primary">
                                <i class="fas fa-globe-asia"></i>
                            </div>
                            <div class="mini-badge-name">环球行者</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 稀有勋章 -->
        <div class="badge-wall">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-star"></i> 稀有勋章
                </h2>
            </div>
            
            <div class="badge-grid">
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-purple">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="badge-name-sm">早期用户</h3>
                    <div class="badge-level-sm">内测专属</div>
                </div>
                
                <div class="badge-card">
                    <div class="badge-icon-sm badge-orange">
                        <i class="fas fa-gift"></i>
                    </div>
                    <h3 class="badge-name-sm">周年庆典</h3>
                    <div class="badge-level-sm">周年活动</div>
                </div>
                
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-pink">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h3 class="badge-name-sm">神秘嘉宾</h3>
                    <div class="badge-level-sm">邀请获得</div>
                </div>
                
                <div class="badge-card locked">
                    <div class="badge-lock">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="badge-icon-sm badge-primary">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="badge-name-sm">社区卫士</h3>
                    <div class="badge-level-sm">举报达人</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 勋章详情模态框 -->
    <div class="modal fade badge-modal" id="badgeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">勋章详情</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="badge-detail-icon badge-primary">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <h3 class="badge-detail-name">新手勋章</h3>
                    <div class="badge-detail-level">Lv.1 解锁</div>
                    <p class="badge-detail-desc">当用户注册并完成新手引导后解锁，象征着在社区旅程的开始。佩戴此勋章展示你对新事物的探索精神。</p>
                    
                    <div class="badge-detail-meta">
                        <div class="meta-item">
                            <div class="meta-label">解锁条件</div>
                            <div class="meta-value">完成注册和新手引导</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">解锁时间</div>
                            <div class="meta-value">2023-03-15</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">稀有度</div>
                            <div class="meta-value">普通</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">拥有人数</div>
                            <div class="meta-value">12,580 人</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="unlock-btn" data-bs-dismiss="modal">佩戴勋章</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 筛选标签切换
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.filter-tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 这里可以添加筛选逻辑
                const filter = this.textContent;
                console.log('筛选条件: ' + filter);
            });
        });
        
        // 勋章卡片点击事件 - 动态加载勋章详情
        document.querySelectorAll('.badge-card[data-bs-toggle="modal"]').forEach(card => {
            card.addEventListener('click', function() {
                const badgeType = this.getAttribute('data-badge') || 'default';
                const modal = document.getElementById('badgeModal');
                
                // 根据勋章类型更新模态框内容
                let badgeDetails = {
                    icon: 'fas fa-seedling',
                    color: 'badge-primary',
                    name: '新手勋章',
                    level: 'Lv.1 解锁',
                    desc: '当用户注册并完成新手引导后解锁，象征着在社区旅程的开始。佩戴此勋章展示你对新事物的探索精神。',
                    condition: '完成注册和新手引导',
                    time: '2023-03-15',
                    rarity: '普通',
                    owners: '12,580 人',
                    isLocked: false
                };
                
                // 根据不同勋章类型自定义内容
                if (badgeType === 'advanced') {
                    badgeDetails = {
                        icon: 'fas fa-leaf',
                        color: 'badge-secondary',
                        name: '进阶勋章',
                        level: 'Lv.2 解锁',
                        desc: '当用户等级达到2级时解锁，代表你已经熟悉了社区的基本操作和规则，开始积极参与社区互动。',
                        condition: '等级达到2级',
                        time: '2023-03-28',
                        rarity: '普通',
                        owners: '9,852 人',
                        isLocked: false
                    };
                } else if (badgeType === 'senior') {
                    badgeDetails = {
                        icon: 'fas fa-tree',
                        color: 'badge-success',
                        name: '资深勋章',
                        level: 'Lv.3 解锁',
                        desc: '当用户等级达到3级时解锁，表明你已经成为社区的活跃成员，积极分享内容并参与讨论。',
                        condition: '等级达到3级',
                        time: '2023-04-15',
                        rarity: ' uncommon',
                        owners: '7,241 人',
                        isLocked: false
                    };
                }
                
                // 更新模态框内容
                modal.querySelector('.badge-detail-icon').className = `badge-detail-icon ${badgeDetails.color}`;
                modal.querySelector('.badge-detail-icon i').className = `fas ${badgeDetails.icon}`;
                modal.querySelector('.badge-detail-name').textContent = badgeDetails.name;
                modal.querySelector('.badge-detail-level').textContent = badgeDetails.level;
                modal.querySelector('.badge-detail-desc').textContent = badgeDetails.desc;
                
                const metaItems = modal.querySelectorAll('.meta-value');
                metaItems[0].textContent = badgeDetails.condition;
                metaItems[1].textContent = badgeDetails.time;
                metaItems[2].textContent = badgeDetails.rarity;
                metaItems[3].textContent = badgeDetails.owners;
                
                // 更新按钮状态
                const unlockBtn = modal.querySelector('.unlock-btn');
                if (badgeDetails.isLocked) {
                    unlockBtn.textContent = '未解锁';
                    unlockBtn.classList.add('locked');
                } else {
                    unlockBtn.textContent = '佩戴勋章';
                    unlockBtn.classList.remove('locked');
                }
            });
        });
        
        // 勋章佩戴按钮点击事件
        document.querySelector('.unlock-btn:not(.locked)').addEventListener('click', function() {
            alert('勋章已成功佩戴到个人主页！');
        });
    </script>
</body>
</html>
    
